<script setup>
import EditContainer from "@/components/AdminConponents/EditContainer.vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {adminDetailAPI, adminStateChangeAPI, adminUpdateAPI} from "@/api/AdminApi/admin.js";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const route = useRoute()
const adminInfo = ref({})
const getAdminInfo = async (id = route.params.id) => {
  const res = await adminDetailAPI(id)
  /* eslint-disable no-unused-vars */
  const {createTime, updateTime, createUser, updateUser, ...formData} = res.data
  adminInfo.value = formData
}
onMounted(() => getAdminInfo())

// 选择图片
const onSelectFile = (uploadFile) => {
  // 基于 FileReader 读取图片做预览
  const reader = new FileReader()
  reader.readAsDataURL(uploadFile.raw)
  reader.onload = () => {
    adminInfo.value.avatar = reader.result
  }
}

// 切换管理员状态
const changeState = async () => {
  const res = await adminStateChangeAPI(adminInfo.value.id)
  if (res.code === 1) {
    ElMessage.success("修改状态成功")
    getAdminInfo()
  } else {
    ElMessage.error(res.msg)
  }
}

// 取消按钮
const router = useRouter()
const cancel = () => {
  router.go(-1)
}

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符之间', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确', trigger: 'blur' }
  ],
  idNumber: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/, message: '身份证号码格式不正确', trigger: 'blur' }
  ],
}
const formRef = ref()
// 修改按钮
const edit = async () => {
  await formRef.value.validate()
  const res = await adminUpdateAPI(adminInfo.value)
  if (res.code === 1) {
    ElMessage.success("更新成功")
    router.push("/admin/admin/list")
  } else {
    ElMessage.error(res.msg)
  }
}
</script>

<template>
  <EditContainer title="编辑管理员">
    <template #body>
      <el-form ref="formRef" :model="adminInfo" :rules="rules" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户姓名" prop="name">
          <el-input v-model="adminInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="adminInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="adminInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="adminInfo.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
              ref="uploadRef"
              :auto-upload="false"
              class="avatar-uploader"
              :show-file-list="false"
              :on-change="onSelectFile">
            <img v-if="adminInfo.avatar" :src="adminInfo.avatar" class="avatar" alt=""/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="管理员等级">
          <el-select v-model="adminInfo.status">
            <el-option label="高级管理员" :value="0"/>
            <el-option label="普通管理员" :value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员状态">
          {{ adminInfo.state === false ? "正常" : "锁定" }}
          <span>
            <el-button
                v-if="adminInfo.state === false"
                type="danger"
                style="margin-left: 20px"
                @click="changeState">
              封禁
            </el-button>
            <el-button
                v-else type="success"
                style="margin-left: 20px"
                @click="changeState">
              启用
            </el-button>
          </span>
        </el-form-item>
      </el-form>
    </template>
    <template #footerLeft>
      <el-button class="button" @click="cancel" type="info">取消</el-button>
    </template>
    <template #footerRight>
      <el-button class="button" @click="edit" type="primary">修改</el-button>
    </template>
  </EditContainer>
</template>

<style scoped lang="scss">
.avatar-uploader {
  :deep {
    .avatar {
      width: 150px;
      height: 150px;
      display: block;
    }

    .el-upload {
      width: 150px;
      height: 150px;
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
</style>
